<template>
    <div class='my_box' :style='$pcShow?"":"width:100%;display: flex;"'>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
                <div style="display: flex;align-items: center;">
                    <img :src="user.headImg" alt=""
                        style="height: 4rem;cursor: pointer;width: 4rem;object-fit: cover;border-radius: 50%;"
                        v-if='!sendedImg'>
                    <img :src="sendedImg" alt=""
                        style="height: 4rem;cursor: pointer;width: 4rem;object-fit: cover;border-radius: 50%;"
                        v-if='sendedImg'>
                    <el-upload class="upload-demo" :action="upImgAvatar" :show-file-list="false"
                        :on-success='uploadSuccess'>
                        <el-button class='changeHead' size="small" type="primary">更改头像</el-button>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickName"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex" label="left" style="">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    <el-radio label="外星人"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="个人简介">
                <el-input type="textarea" v-model="form.info"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import blog from '../../api/blog';

export default {
    data() {
        return {
            form: {
                nickName: '',
                sex: '',
                info: '',
            },
            fileList: [],
            sendedImg: '',
            password: '',
            upImgAvatar: blog.upImgAvatar(),
        }
    },
    mounted() {
        this.checkUserInfo()
    },
    methods: {
        ...mapActions(["getGrxx", "checkLogin", "logout", "getPermissions",]),
        checkUserInfo() {
            if (this.user.nickName) this.form.nickName = this.user.nickName
            if (this.user.sex) this.form.sex = this.user.sex
            if (this.user.info) this.form.info = this.user.info
        },
        onSubmit() {
            if (this.password) {
                this.updatedUserInfo(this.form.nickName, this.form.info, this.sex, this.user.name, this.password)
            } else {
                this.checkUser('', 'updatedUserInfo')
            }
        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        uploadFile(options) {
            let file = options.file
            let filename = file.name
            let reader = new FileReader();
            if (file) {
                reader.readAsDataURL(file)
            }
            reader.onload = () => {
                let base64Str = reader.result
                blog.upImg(base64Str).then(res => {
                    if (res.success) {
                        //this.$message({message: '图片上传成功',type: 'success'})
                        this.checkUser(res.data, 'changeHeadImg')
                        //this.sendedImg = res.data 图片回显
                    } else {
                        this.$message.error({ message: '上传图片失败' })
                    }

                })
            }
        },
        uploadSuccess(e) {//上传附件
            console.log(e)
            this.showProgress = false
            if (e.success) {
                // this.upFileUrl = e.data
                this.checkUser(e.data, 'changeHeadImg')
            } else {
                this.$message.error('上传失败')
            }
        },
        checkUser(url, fun) {
            this.$prompt('请输入密码', '身份认证', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                this.password = this.$md5(value)
                if (fun == 'changeHeadImg') {
                    this.changeHeadImg(url, this.$md5(value))
                } else if (fun == 'updatedUserInfo') {
                    this.updatedUserInfo(this.form.nickName, this.form.info, this.form.sex, this.user.name, this.password)
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消更改'
                });
            });
        },
        async changeHeadImg(headImg, password) {
            console.log('aaa')
            try {
                let res = await blog.changeHeadImg(headImg, this.user.name, password)
                this.sendedImg = headImg //图片回显
                this.$message({
                    type: 'success',
                    message: '头像更改成功!请重新登录'
                });
                setTimeout(res => {
                    this.logout()
                    setTimeout(res => {
                        this.$router.push({ path: '/login' })
                    }, 1000)
                }, 2000)
                console.log(res)
            } catch (err) {
                this.$message.error({
                    message: '头像更改失败!请检查密码'
                });
            }
        },
        async updatedUserInfo(nickName, info, sex, name, password) {
            try {
                let res = await blog.updatedUserInfo(nickName, info, sex, name, password)
                this.$message({
                    type: 'success',
                    message: '信息更新成功!请重新登录'
                });
                setTimeout(res => {
                    this.logout()
                    setTimeout(res => {
                        this.$router.push({ path: '/login' })
                    }, 1000)
                }, 2000)
                console.log(res)
            } catch (err) {
                this.$message.error({
                    message: '信息更新失败!请检查密码'
                });
            }
        },
    },
    computed: {
        ...mapGetters(["isLogin", "user"])
    },
}
</script>

<style lang="less" scoped>
.el-input__inner {
    -webkit-appearance: none;
    background-color: #272727 !important;
    background-image: none;
    border-radius: 4px;
    border: none !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff !important;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}

.el-textarea__inner {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #ffffff !important;
    border: none !important;
    background-color: #272726 !important;
    background-image: none;
    border: none;
    border-radius: 4px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.my_box {
    width: 40%;
    margin: 2rem auto;
    background: #131418;
    padding: 2rem;
    height: 50rem;
}
.el-form-item {
    text-align: left !important;
}
.el-radio {
    color: #c7c7c7;
    cursor: pointer;
    margin-right: 30px;
}
.el-radio__input.is-checked .el-radio__inner {
    border-color: #353535 !important;
    background: #353535 !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #353535;
}
.el-radio__input.is-checked + .el-radio__label {
    color: #ffffff;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #353535;
    border-color: #353535;
}
.el-button--primary {
    color: #fff;
    background-color: #353535;
    border-color: #353535;
}
.el-button--primary:focus,
.el-button--primary:hover {
    background: #fa5a5f;
    border-color: #fc5257;
    color: #fff;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
    border-color: #353535;
    outline: 0;
}
.el-textarea__inner:focus {
    outline: 0;
    border-color: #353535;
}
.el-checkbox__inner:hover {
    border-color: #353535;
}
.el-radio__inner:hover {
    border-color: #353535;
}
.changeHead {
    margin-left: 1rem;
    color: white;
    display: flex;
    padding: 0 1rem;
    align-items: center;
    border-radius: 22px;
    height: 2rem;
    background: #7e6fe1;
    border: #7e6fe1;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
        background: #7563e6;
        transition: all 0.3s;
    }
}
</style>
